<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            v-model只是一个语法糖
                语法糖其实就是少量代码生成多个代码，这就叫语法糖

                所以它到底生成了什么代码？
                    数据 -> 界面
                            value 属性
                    界面 -> 数据
                            input 事件
         -->
        <!-- <input type="text" v-model="msg"> -->

        <!-- <input type="text" v-bind:value="msg"> -->

        <!-- $event在原生标签里代表事件对象 -->
        <!-- $event.target就是事件对象.target，这就是找到事件里的目标元素，这里也就是input -->
        <!-- 然后.value就是拿到这个输入框的值，把值给了msg -->
        <input type="text" :value="msg" @input="msg = $event.target.value">


        <!-- 总结：
                v-model的原理就是个语法糖
                    它就是由 input 事件 和 :value组成而来
         -->
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'hello'
                }
            },
        })
    </script>
</body>
</html>